<template>
  <div>
    <kv label="数据库">
      <db-conn :data="$props.data" ref="conn_com"></db-conn>

      <collection-ref :data="$props.data" v-model="info.table"
                      style="margin-left:40px" @click="collection_click"
                      @change="collection_change"></collection-ref>
    </kv>

    <kv label="条件">
      <where v-model="info.ui_wheres" :columns="getColumns($data.previewData)"></where>
    </kv>

    <div style="display: flex">
      <kv>
        <el-button @click="view_click" style="margin-left: 200px">预览</el-button>

        <el-button type="primary" @click="ok_click()" style="margin-left: 200px">导出</el-button>

        <div style="display: flex;flex-wrap:nowrap; margin-left: 10px;">
          <el-input v-model="info.skip" style="width:160px;">
            <template slot="prepend">skip</template>
          </el-input>
          <el-input v-model="info.take" style="width:160px;margin-left: 20px;">
            <template slot="prepend">take</template>
          </el-input>
        </div>
      </kv>
    </div>

    <preview-json-table ref="table" :model-value="$data.previewData"
                        :currentPage.sync="$data.pageNumber"
                        @pager-change="pager_change"
                        @delete="table_delete"></preview-json-table>
  </div>
</template>

<style lang="scss" scoped>
::v-deep(.kv) {

  .k {
    max-width: 180px;
  }

  .v {

    > :first-child {
      max-width: unset;
    }
  }
}

</style>
<script setup>
/**
 * Created by CodeGenerator  at 2021-03-15 10:31:23
 */
import dbConn from "../../../component/db-conn.vue"
import collectionRef from "./collection-ref.vue"
import previewJsonTable from "../../../component/preview-json-table.vue";
import where from "../../../component/where.vue"


defineOptions({
  name: "export",
  inheritAttrs: true,
});

//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();


//定义data
const $data = reactive({
  previewData: {},
  pageNumber: 1,
  info: {
    table: "",
    ui_wheres: [],
    wheres: [],
    skip: 0,
    take: 1000
  }, //子对象需要声明。
});
const info = $computed(() => $data.info);

const $props = defineProps({
  data: {type: Object}
});

const conn_com = ref();

const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue", "loaded"]);

const getColumns = v => {
  if (!v.data || !v.data.length) {
    return [];
  }

  return Object.keys(v.data[0])
}

const action_name = $computed(function () {
  return {add: "添加", edit: "修改"}[$props.action]
});

const collection_change = function (v) {
  jv.$saveData("mongo-exp-table", info.table);
  $data.info.wheres = [];

  $data.pageNumber = 1;
};
const collection_click = function (p) {
//校验
  if (conn_com.value.$el.chk($data.info) == false) {
    p.returnValue = false;
    return;
  }
  pager_change()
};
const view_click = function () {
//校验
  if (conn_com.value.$el.chk($data.info) == false) {
    return;
  }

  $data.pageNumber = 1;
  pager_change();
};
const pager_change = function (p) {
  if (!$props.data.connectionUri) {
    return;
  }
  var info = Object.assign({}, $data.info);
  if (p) {
    info.skip = (p.pageNumber - 1) * p.pageSize;
    info.take = p.pageSize;
  } else {
    info.skip = 0;
    info.take = 15;
  }
  info.wheres = info.ui_wheres.filter(it => it.column && it.op);
  if (!info.table) {
    return;
  }
  info.connectionUri = $props.data.connectionUri;
  jv.$http.post("/dev/mongo/get-data/" + $props.data.id, info).then(res => {
    $data.previewData = res.data;
  })
};
const ok_click = function () {
//校验
  if (conn_com.value.$el.chk($data.info) == false) {
    return;
  }
  jv.$saveData("export", $data.info)
  var info = Object.assign({}, $data.info);
  info.wheres = info.ui_wheres.filter(it => it.column && it.op);
  jv.$http.downloadWithPost("/dev/mongo/export", Object.assign({}, $data.info, {connectionUri: $props.data.connectionUri}))
};
const table_delete = function (row) {
  var rowId = row._id || row.id;
  var json = {};

  json.connectionUri = $props.data.connectionUri;
  json.table = $data.info.table;
  json.id = rowId;
  jv.$http.post("/dev/mongo/delete-id", json).then(res => {
    pager_change();
  });
};

onMounted(() => {
  jv.$loadData("mongo-exp-table", v => $data.info.table = v)
  if (!info.ui_wheres) {
    info.ui_wheres = [];
  }

  if ($data.info.table) {
    pager_change();
  }
})


</script>
